<!DOCTYPE html>
<html>

<head>
	<title>Mask</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../lib/leaflet.css">
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html,
		body,
		#map {
			height: 100%;
		}

		.leaflet-container {
			cursor: default;
		}

	</style>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	<script type="text/javascript" src='../src/leaflet.mask.js'></script>
</head>

<body>
	<div id='map'></div>
</body>
<script type="text/javascript">
	var map = L.map("map", {
		center: [29, 120],
		zoom: 8
	});
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	L.mask('bound.json', {fillOpacity: 0.7,}).addTo(map);

</script>

</html>
